<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import { ElAvatar, ElCard, ElInput, ElOption, ElSelect } from "element-plus";
import { ProTablePlus, ProTableScope } from "@/modules/package/table";
import { ProFormScope } from "@/modules/package/form";

import useTable from "@/hooks/useTable";
import ApiUser from "@/api/users";

const tableColumns = [
  { label: "头像", slot: "avatar", width: 100 },
  { label: "用户名", prop: "nickname", minWidth: 100 },
  { label: "手机号", prop: "mobile", minWidth: 100 },
  { label: "ID", prop: "id", width: 100 },
  { label: "注册时间", prop: "create_time", minWidth: 150 },
];

const formItems = [
  {
    slot: "input",
    children: {
      field: "value",
      placeholder: "请输入搜索内容",
    },
  },
];

const { list, isFetching, pagination, search, submit, reset,bindNodeForPlus } = useTable(
  ApiUser.userList,
  {
    foramtFetchParams(params) {
      const { type, value, ...rest } = params;
      if (value) Reflect.set(rest, type, value);
      return rest;
    },

    defaultSearch: {
      type: "nickname",
      value: "",
    },

  }
);
</script>
<template>
  <ElCard>
    <ProTablePlus
      concise
      footer-fixed
      :ref="bindNodeForPlus"
      :list="list"
      :search="search"
      :loading="isFetching"
      :columns="tableColumns"
      :form-items="formItems"
      :pagination="pagination"
      @submit="submit"
      @reset="reset"
    >
      <template #table-form>
        <ProFormScope>
          <template #input>
            <ElInput
              v-model="search.value"
              :suffix-icon="Search"
              placeholder="请输入搜索内容"
            >
              <template #prepend>
                <ElSelect v-model="search.type" class="w-[90px]">
                  <ElOption label="用户名" value="nickname" />
                  <ElOption label="手机号" value="mobile" />
                </ElSelect>
              </template>
            </ElInput>
          </template>
        </ProFormScope>
      </template>

      <ProTableScope>
        <template #avatar="{ row }">
          <ElAvatar size="small" :src="row.avatar" />
        </template>
      </ProTableScope>
    </ProTablePlus>
  </ElCard>
</template>
